@extends('steward.layout')
@section('css')
<link rel="stylesheet" href="/static/css/steward/index/index.css?v=2017092812890">
@endsection

@section('content')
    <div class="main">
        <div class="main-notice">
            <a href="javascript:;"><span>紧急通知：艺术家合作卡发布疯狂星期五，清洁用品2件5折！414乐视超级电视最高直降980家装节钜惠，3件8.8折！</span></a>
            <span class="icon-cancel"><img src="/static/images/steward/common/icon-cancel.png"> </span>
        </div>
        <div class="main-info-box">
            <div class="main-show">
                <div class="shop-logo"><img src="{{ $logo }}"></div>
                <div style="float: left;line-height: 80px;margin-left: 10px;">{{ $mall_name }}</div>
                <ul class="shop-info-list">
                    <li><a href="javascript:;">
                            <div class="title-info">今日营业额</div>
                            <div class="today-number">{{ $finish_price }}</div>
                            <div class="tom-number">昨日  <span>{{ $yes_finish_price }}</span>元</div>
                        </a></li>
                    <li><a href="javascript:;">
                            <div class="title-info">今日订单数</div>
                            <div class="today-number">{{ $all_bill }}</div>
                            <div class="tom-number">昨日  <span>{{ $yes_all_bill }}</span>单</div>
                        </a></li>
                    <li><a href="javascript:;">
                            <div class="title-info">今日客单价</div>
                            <div class="today-number">{{ $one_price }}</div>
                            <div class="tom-number">昨日  <span>{{ $yes_one_price }}</span>元</div>
                        </a></li>
                </ul>
            </div>
            <ul class="order-flex-5">
                <li ><a href="javascript:;">
                        <p><img src="/static/images/steward/common/i-order.png"></p>
                        <p>新订单</p>
                        <p>{{ $bill_new }}</p>
                    </a></li>
                <li ><a href="javascript:;">
                        <p><img src="/static/images/steward/common/i_gwc.png"></p>
                        <p>待发配送</p>
                        <p>{{ $bill_ready }}</p>
                    </a></li>
                <li ><a href="javascript:;">
                        <p><img src="/static/images/steward/common/i_error.png"></p>
                        <p>异常单</p>
                        <p>{{ $bill_hangup }}</p>
                    </a></li>
                <li ><a href="javascript:;">
                        <p><img src="/static/images/steward/common/i-cuidan.png"></p>
                        <p>催单</p>
                        <p>{{ $bill_remind }}</p>
                    </a></li>
                <li ><a href="javascript:;">
                        <p><img src="/static/images/steward/common/i_back.png"></p>
                        <p>退单</p>
                        <p>{{ $bill_return }}</p>
                    </a></li>
            </ul>

        </div>
        <div class="chart-z-list" style="overflow: hidden">
            <div class="chart-z">
                <div class="chart-title">
                    <span class="chart-info">营收排名</span>
                    <div class="sel-day-btn">
                        <span class="curn" id="today_revenue" style="cursor: pointer;">今日</span>
                        <span id="yes_revenue" style="cursor: pointer;">昨日</span>
                    </div>
                </div>
                <div class="chart-box" id="chart-revenue" style="width: 500px;height:300px;">
                </div>
            </div>
            <div class="chart-z">
                <div class="chart-title">
                    <span class="chart-info">订单效率</span>
                    <div class="sel-day-btn">
                        <span class="curn" id="today_effic" style="cursor: pointer;">今日</span>
                        <span id="yes_effic" style="cursor: pointer;">昨日</span>
                    </div>
                </div>
                <div class="chart-box" id="chart-effic" style="width: 500px;height:300px;">
                </div>
            </div>
        </div>
        <!--
        <div class="chart-z-list">
            <div class="chart-z">
                <div class="chart-title">
                    <span class="chart-info">新手上路</span>
                    <div class="sel-day-btn">
                        <a href="javascript:;" class="more">更多</a>
                    </div>
                </div>
                <div class="chart-box">
                    <ul class="news-list">
                        <li><a href="javascript:;">商管家交易条款</a><span>2017-02-04</span></li>
                        <li><a href="javascript:;">商管家交易条款</a><span>2017-02-04</span></li>
                        <li><a href="javascript:;">商管家交易条款</a><span>2017-02-04</span></li>
                        <li><a href="javascript:;">商管家交易条款</a><span>2017-02-04</span></li>
                        <li><a href="javascript:;">商管家交易条款</a><span>2017-02-04</span></li>
                    </ul>
                </div>
            </div>
            <div class="chart-z">
                <div class="chart-title">
                    <span class="chart-info">新手上路</span>
                    <div class="sel-day-btn">
                        <a href="javascript:;" class="more">更多</a>
                    </div>
                </div>
                <div class="chart-box">
                    <ul class="news-list">
                        <li><a href="javascript:;">商管家交易条款</a><span>2017-02-04</span></li>
                        <li><a href="javascript:;">商管家交易条款</a><span>2017-02-04</span></li>
                        <li><a href="javascript:;">商管家交易条款</a><span>2017-02-04</span></li>
                        <li><a href="javascript:;">商管家交易条款</a><span>2017-02-04</span></li>
                        <li><a href="javascript:;">商管家交易条款</a><span>2017-02-04</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="chart-zx">
            <div class="chart-zx-box">
                <img src="/static/images/steward/zxt.png">
            </div>
        </div>
    </div>
    -->
@endsection
@section('js')
    <script src="http://echarts.baidu.com/dist/echarts.js"></script>
    <script>
        $(function(){

            //营收数据
            var min_revenue = '{{ $min_revenue }}';
            var max_revenue = '{{ $max_revenue }}';
            var avg_revenue = '{{ $avg_revenue }}';
            var shop_revenue = '{{ $shop_revenue }}';
            var revenue_arr = [min_revenue,avg_revenue,shop_revenue,max_revenue];

            var yes_min_revenue = '{{ $yes_min_revenue }}';
            var yes_max_revenue = '{{ $yes_max_revenue }}';
            var yes_avg_revenue = '{{ $yes_avg_revenue }}';
            var yes_shop_revenue = '{{ $yes_shop_revenue }}';
            var yes_revenue_arr = [yes_min_revenue,yes_avg_revenue,yes_shop_revenue,yes_max_revenue];

            //订单效率数据
            var min_effic = '{{ $min_effic }}';
            var max_effic = '{{ $max_effic }}';
            var avg_effic = '{{ $avg_effic }}';
            var shop_effic = '{{ $shop_effic }}';
            var effic_arr = [min_effic,avg_effic,shop_effic,max_effic];

            var yes_min_effic = '{{ $yes_min_effic }}';
            var yes_max_effic = '{{ $yes_max_effic }}';
            var yes_avg_effic = '{{ $yes_avg_effic }}';
            var yes_shop_effic = '{{ $yes_shop_effic }}';
            var yes_effic_arr = [yes_min_effic,yes_avg_effic,yes_shop_effic,yes_max_effic];

            var charts = {
                myChart : function(id,data){
                    var chart = echarts.init(document.getElementById(id));
                    var option = {
                        title:{},
                        tooltip: {},
                        legend:{
                            data:[data.name]
                        },
                        xAxis:{
                            data:['最低','平均','本店','最高']
                        },
                        yAxis:[{
                                splitLine : {
                                    show:false
                                }
                        }],
                        series:[{
                            name:data.name,
                            type:'bar',
                            data:data.data
                        }]
                    };
                    chart.showLoading();
                    chart.setOption(option);
                    chart.hideLoading();
                }
            };

            $(document).on('click','#today_revenue',function(){   //今日营业额

                charts.myChart('chart-revenue',{name:'营业额',data:revenue_arr});
                $('#today_revenue').addClass('curn');
                $('#yes_revenue').removeClass('curn');

            }).on('click','#yes_revenue',function(){        //昨日营业额

                charts.myChart('chart-revenue',{name:'营业额',data:yes_revenue_arr});
                $('#yes_revenue').addClass('curn');
                $('#today_revenue').removeClass('curn');

            }).on('click','#today_effic',function(){      //今日订单效率

                charts.myChart('chart-effic',{name:'效率/s',data:effic_arr});
                $('#today_effic').addClass('curn');
                $('#yes_effic').removeClass('curn');

            }).on('click','#yes_effic',function(){       //昨日订单效率

                charts.myChart('chart-effic',{name:'效率/s',data:yes_effic_arr});
                $('#yes_effic').addClass('curn');
                $('#today_effic').removeClass('curn');

            });

            charts.myChart('chart-revenue',{name:'营业额',data:revenue_arr});
            charts.myChart('chart-effic',{name:'效率/s',data:effic_arr});
        })
    </script>
@endsection
